.
<!--  -->
<template>
<div class=''>
  <el-steps :active="active" finish-status="success"
   style="margin-top: 20px;margin-left: 20px;margin-right: 20px;">
  <el-step title="选择楼栋号">xxxx</el-step>
  <el-step title="图片上传">111</el-step>
  <el-step title="提交成果">111</el-step>
</el-steps>



  <el-row :gutter="20" v-show="show" >
  <el-col :span="16" :offset="4" ><div class="grid-content bg-purple" 
     style="margin-top:10px;margin-left:200px"  >


     <el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">



   
  <el-form-item label="报修人名" style="width:300px" prop="name">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
  <el-form-item label="楼栋" prop="loudon">
    <el-select v-model="form.loudon" placeholder="请选择活动区域">
      <el-option label="三路楼" value="三路楼" ></el-option>
      <el-option label="雪津楼" value="雪津楼"></el-option>
      <el-option label="新公寓" value="新公寓"></el-option>
      <el-option label="凤A" value="凤A"></el-option>
      <el-option label="凤B" value="凤B"></el-option>
      <el-option label="凤C" value="凤C"></el-option>
      <el-option label="凤D" value="凤D"></el-option>
      <el-option label="凤E" value="凤E"></el-option>
      <el-option label="凤F" value="凤F"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="宿舍号" style="width:300px" prop="sushe">
    <el-input v-model="form.sushe"></el-input>
  </el-form-item>
  <el-form-item label="保修时间" prop="time">
    <el-col :span="11">
      <el-date-picker type="date" placeholder="选择日期" v-model="form.time" value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
    </el-col>
   
  </el-form-item>
  <el-form-item label="保修项目" prop="xianmu">
    <el-radio-group v-model="form.xianmu">
      <el-radio label="水" name="type"></el-radio>
      <el-radio label="电" name="type"></el-radio>
      <el-radio label="木作" name="type"></el-radio>
      <el-radio label="玻璃" name="type"></el-radio>
      <el-radio label="电器" name="type"></el-radio>
    </el-radio-group>
  </el-form-item>


  <el-form-item label="具体保修" prop="juti">
    <el-input type="textarea" v-model="form.juti"></el-input>
  </el-form-item>
  <el-form-item>
   
<el-button type="primary" style="margin-top:  12px;" @click="next('ruleForm')">下一步</el-button>
  </el-form-item>

</el-form>

  </div></el-col>
 
</el-row>
<el-row :gutter="20" v-show="show2" >
  <el-col :span="16" :offset="4" ><div class="grid-content bg-purple" 
     style="margin-top:10px;margin-left:200px"  >


    <el-form ref="form" :model="form" label-width="80px">
  <el-form-item>
    <el-upload
  class="upload-demo"
  drag
  action="https://jsonplaceholder.typicode.com/posts/"
  multiple>
  <i class="el-icon-upload"></i>
  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
  <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
  </el-form-item>
  <el-form-item>
    <el-button style="margin-top: 12px;" @click="pre">上一步</el-button>
    <el-button type="primary" @click="onSubmit">提交</el-button>
    <el-button>取消</el-button>
  </el-form-item>
</el-form>

  </div></el-col>
 
</el-row>

<el-row :gutter="20" v-show="show3" >

  <el-result icon="success" title="提交成功" subTitle="处理中...">
     
    </el-result>
</el-row>
</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import * as echarts from 'echarts';
import { listBaoxiu, getBaoxiu, delBaoxiu, addBaoxiu, updateBaoxiu } from "@/api/system/baoxiu";

export default {
//import引入的组件需要注入到对象中才能使用
components: {},
data() {
//这里存放数据
return {
  form: { 
        name: '',
        loudon: '',
        sushe: '',
        time: '',
        xianmu: '',
        juti: '',
        imeage: 'http://imagev2.xmcdn.com/storages/a131-audiofreehighqps/B1/13/CKwRIDoFOMCBAAFRgADrXABE.jpg!strip=1&quality=7&magick=jpg&op_type=5&upload_type=album&name=mobile_large&device_type=ios',
        state: '未处理'
        },
        ruleForm: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
   rules: {
        name: [
          { required: true, message: "保修人不能为空", trigger: "blur" }
        ],
        loudon: [
          { required: true, message: "楼栋不能为空", trigger: "blur" }
        ],
        sushe: [
          { required: true, message: "宿舍号不能为空", trigger: "blur" }
        ],
        time: [
          { required: true, message: "报修时间不能为空", trigger: "blur" }
        ],
        xianmu: [
          { required: true, message: "项目不能为空", trigger: "blur" }
        ],
        juti: [
          { required: true, message: "具体不能为空", trigger: "blur" }
        ]
      },

        active: 0,
        show:true,
        show2:false,
        show3:false
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
  onSubmit() {
    let self = this
    addBaoxiu(this.form).then(req => {
      console.log(req);
      if(req.code == 200){
        this.show=false
        this.show2=false
        this.show3=true
        if (this.active++ > 2) this.active = 0;
        self.$message({
          message: '恭喜你，提交成功',
          type: 'success'
        });
      }else{
        this.pre
        self.$message.error('错了哦，提交失败');
      }
    })
        
      },
      open1() {
      
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      next(form) {

        this.$refs[form].validate((valid) => {
      
          if (valid) {
            console.log(this.form)
        this.show=false
        this.show2=true
        if (this.active++ > 2) this.active = 0;
          } else {
            console.log('error submit!!');
            return false;
          }
        });
 
      },
      pre() {
        --this.active;
        this.show2=false
        this.show=true
      //判断条件，当active小于1，显示第一个组件
      if (this.active < 1) this.active = 1;
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
},
//生命周期 - 创建完成（可以访问当前this实例）
created() {

},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {
},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

</style>